/* 广告宣传的样式文件 */
/* 引入 common.less @import"文件名" */
@import "common";
/* 引入导航栏工具 */ 
@import "navTool";


/* 创意设计模块 (105rem / @basefont)*/
.Creative_design {
    margin-top: ((105rem+23) / @basefont);
    background-color: #fff;
    width: (750rem / @basefont);
    overflow: hidden;
    .design_box {
        .design_top {
            position: relative;
            border-bottom: 0.04313rem rgba(243,243,243,1) solid;
            box-sizing: border-box;
            height: (114rem / @basefont);
            width: 100%;
            background-color: #fff;
            font-size: (30rem / @basefont);
            .design_title {
                position: absolute;
                left: (-30rem / @basefont);
                border-radius: (60rem / @basefont / 2);
                width: (198rem / @basefont);
                height: (60rem / @basefont);
                background-color: rgba(6,193,174,1);
                color: #fff;
                text-align: center;
                line-height: (60rem / @basefont);
            }
        }
        .design_body {
            padding-top: (36rem / @basefont);
            box-sizing: border-box;
            height: (473rem / @basefont);
            width: 100%;
            .swiper-container {
                //margin-top: (36rem / @basefont);
                width: 100%;
                height: 100%;
                .swiper-slide {
                    text-align: center;
                    font-size: 18px;
                    background: #fff;
                    height: (400rem / @basefont);
                    width: (660rem / @basefont);
                    /* Center slide text vertically */
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    flex-direction: column;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    -webkit-justify-content: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                    transition: 300ms;
                    //其余兄弟是0.8大小
                    transform: scale(0.8);
                    //透明度降低
                    opacity: 0.6;
                    a {
                        display: block;
                        border-radius: (10rem / @basefont);
                        overflow: hidden;
                        box-shadow: 0 0.4rem 0.48rem -0.2rem rgb(0 0 0 / 25%);
                        height: (400rem / @basefont);
                        width: (660rem / @basefont);
                        img {
                            height: 100%;
                            width: 100%;
                        }
                    }
                }
                .swiper-slide-active,.swiper-slide-duplicate-active{
                    //正中间的是1
                    transform: scale(1);
                    //把它浮在上面
                    z-index: 2;
                    //透明度恢复
                    opacity: 1;
                }
            }
            
        }
    }
}
/* 三栏模块 */
.three_part {
    margin-top: (23rem / @basefont);
    padding-top: (17rem / @basefont);
    width: (750rem / @basefont);
    background-color: #fff;
    .part_nav {
        height: (70rem / @basefont);
        font-size: (30rem / @basefont);
        line-height: (70rem / @basefont);
        span {
            position: relative;
            display: inline-block;
            margin: 0 (26.4rem / @basefont);
            height: 100%;
            color: #666;
            .bum {
                display: none;
                position: absolute;
                bottom:0;
                border-radius: (5rem / @basefont / 2);
                width: 100%;
                height: (5rem / @basefont);
                background-color: rgba(6,193,174,1);
            }
        }
    }
    .part_body {
        padding: 0 (36rem / @basefont);
        box-sizing: border-box;
        width: 100%;
        background-color: #fff;
        .article {
            display: block;
            //height: (635rem / @basefont);
            border-bottom: (1rem / @basefont) solid #eee;
            width: 100%;
            .article_pic {
                margin-top: (30rem / @basefont);
                border-radius: (10rem / @basefont);
                overflow: hidden;
                height: (365rem / @basefont);
                width: 100%;
                img {
                    height: 100%;
                    width: 100%;
                }
            }
            .article_page {
                margin-top: (20rem / @basefont);
                .article_title {
                    margin-bottom: (15rem / @basefont);
                    font-size: (35rem / @basefont);
                    font-weight: 700;
                }
                .article_in {
                    overflow:hidden;
                    text-overflow:ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp:2;   //在第几行加省略号
                    -webkit-box-orient:vertical;
                    font-size: (30rem / @basefont);
                    color: #848e98;
                }
            }
            .author {
                margin-top: (22rem / @basefont);
                margin-bottom: (33.2rem / @basefont);
                font-size: (25em / @basefont);
                color: #ababab;
            }
        }
        .AI_part {
            display: none;
            //background-color: skyblue;
        }
        .DS_part {
            display: none;
            //display: block;
            //background-color: pink;
            .article_pic {
                position: relative;
                .sub_title {
                    z-index: 2;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    padding: 0 (24rem / @basefont);
                    box-sizing: border-box;
                    box-shadow: inset 0 0 5px rgb(0 0 0 / 50%);
                    font-size: 0.65rem;
                    color: #fff;
                    width: 100%;
                    //background-color: pink;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp:1;   //在第几行加省略号
                    -webkit-box-orient:vertical;
                }
            }
            .article_page {
                margin-bottom: (33.2rem / @basefont);
                .article_title {
                    font-weight: 400;
                    color: #222;
                }
            }
        }
        .AD_part {
            display: none;
            //display: block;
            .article_pic {
                margin-bottom: (33.2rem / @basefont);
                position: relative;
                height: (436.8rem / @basefont);
                overflow: hidden;
                .pic_black {
                    z-index: 2;
                    position: absolute;
                    top: 0;
                    padding: 0 (72rem / @basefont);
                    box-sizing: border-box;
                    height: 100%;
                    width: 100%;
                    background-color: rgba(0, 0, 0, 0.3);
                    font-size: (35rem / @basefont);
                    color: #fff;
                    text-align: center;
                    .pic_in {
                        .article_title {
                            font-weight: 400;
                        }
                        .article_in {
                            margin: (20rem / @basefont) (72rem / @basefont);
                            margin-bottom: 0;
                            opacity: 0.8;//降低透明度
                            font-family: '微软雅黑';
                            font-size: (27.5rem / @basefont);
                            /* 控制行数 */
                            overflow:hidden;
                            text-overflow:ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp:2;   //在第几行加省略号
                            -webkit-box-orient:vertical;
                        }
                    }
                }
            }
            //background-color: slateblue;
        }
    }
}

